<template>
  <!--
    作者 libh
    时间：2024-5-14
    描述：设置-短信服务
-->
  <div class="home" v-loading="loading">
    <div class="d-b-c">
      <div class="operation-wrap">
        <el-row>
          <el-col :span="6" class="d-c-c">
            <div class="grid-content yellow ">
              <div class="info">
                <h3 style="font-size: 32px;">{{sms_num}}</h3>
                <p>剩余可用短信(条)</p>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="ww100 mt30">
      <el-tabs v-model="activeName">
        <el-tab-pane label="发送记录" name="first"></el-tab-pane>
      </el-tabs>
      <div class="d-b-c">
        <div>
          <el-date-picker
            size="small"
            v-model="datePicker"
            type="daterange"
            align="right"
            unlink-panels
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="changeDate"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </div>
      </div>
      <div class="">
        <div class="Echarts">
          <div ref="LineChart" id="LineChart"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>

import {formatDate} from "@/utils/DateTime";
import StatisticsApi from "@/api/statistics";
import SettingApi from "@/api/setting";

export default {
  data() {
    let endDate = new Date();
    let startDate = new Date();
    startDate.setTime(startDate.getTime() - 3600 * 1000 * 24 * 7);
    return {
      loading: false,
      sms_num:0,
      activeName: "first",
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      datePicker: [formatDate(startDate, 'yyyy-MM-dd'), formatDate(endDate, 'yyyy-MM-dd')],
      dataList: null,
      /*交易统计图表对象*/
      myChart: null,
      /*图表数据*/
      option: {
        title: {
          //text: 'ECharts 入门示例'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis'
        },
        yAxis: {}
      }
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  created() {
    this.getSmsData();
    this.myEcharts();
  },
  methods: {
    handleResize() {
      this.myChart && this.myChart.resize();
    },
    changeDate() {
      this.getData();
    },

    getSmsData(){
      SettingApi.getSupplier().then(res=>{
        this.sms_num =res.data.model.sms_num;
      }).catch(err=>{});
    },

    myEcharts() {
      // 基于准备好的dom，初始化echarts实例

      this.$nextTick(() => {
        this.myChart = this.$echarts.init(this.$refs.LineChart);
        /*获取列表*/
        this.getData();
      })

    },
    createOption() {
      if (!this.loading) {
        let names = [];
        let xAxis = this.dataList.days;
        let series1 = [];
        this.dataList.data.forEach(item => {
          series1.push(item.total_num);
        });
        names = ['发送条数'];

        // 指定图表的配置项和数据
        this.option.xAxis = {
          type: 'category',
          boundaryGap: false,
          data: xAxis
        };
        this.option.color = ["red", "#409EFF"];

        //  this.option.legend = {
        //   data: [{ name: names[0], color: '#ccc' }]
        // };
        this.option.series = [
          {
            name: names[0],
            type: 'line',
            data: series1,
            lineStyle: {
              color: 'red'
            }
          }
        ];

        this.myChart.setOption(this.option);
        this.myChart.resize();
      }
    },
    getData() {
      let self = this;
      self.loading = true;
      StatisticsApi.getSmsByDate(
        {
          search_time: self.datePicker,
          type: self.activeName
        },
        true
      )
        .then(res => {
          self.dataList = res.data;
          self.loading = false;
          self.createOption();
        })
        .catch(error => {
        });
    }
  }

}
</script>
<style lang="scss" scoped>
.operation-wrap {
  width: 100%;
  height: 164px;
  border-radius: 8px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  background-size: 100% 100%;
  color: #FFFFFF;
  margin-right: 15px;
}

.home .operation-wrap .grid-content {
  width: 90%;
  height: 150px;
  justify-content: flex-start;
  align-items: center;
  padding-left: 23px;
}

.operation-wrap .grid-content h3 {
  font-size: 36px;
  line-height: 40px;
}

.operation-wrap .grid-content .info h3 {
  font-size: 40px;
  line-height: 40px;
  color: #FFFFFF;
  text-align: left;
  margin-bottom: 20px;
}

.home .operation-wrap .grid-content .info {
  margin-left: 10px;
  text-align: left;
  font-size: 14px;
  color: #FFFFFF;
}

.operation-wrap .grid-content .svg-icon {
  color: #FFFFFF;
}

.home-index {
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  min-width: 1000px;
  overflow-x: auto;
}

.operation-wrap .grid-content.blue {
  background: url(../../../assets/img/total_order.png) no-repeat;
  background-size: 100% 100%;
}

.operation-wrap .grid-content.yellow {
  background: url(../../../assets/img/total_user.png) no-repeat;
  background-size: 100% 100%;
}

.operation-wrap .grid-content.purple {
  background: url(../../../assets/img/total_volume.png) no-repeat;
  background-size: 100% 100%;
}

.operation-wrap .grid-content.orderred {
  background: url(../../../assets/img/total_shop.png) no-repeat;
  background-size: 100% 100%;
}

.operation-wrap .grid-content .info h3 {
  font-size: 40px;
  line-height: 40px;
  color: #FFFFFF;
  text-align: left;
  margin-bottom: 20px;
}

.operation-wrap .grid-content .info {
  margin-left: 10px;
  text-align: center;
  font-size: 14px;
  color: #FFFFFF;
}

.operation-wrap .grid-content .svg-icon {
  color: rgba(255, 255, 255, .3);
  font-size: 300%;
}

.main-index {
  flex: 1;
}

.main-index .grid-content,
.operation-wrap .grid-content {

  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.main-index .grid-content {
  height: 120px;
}

.main-index .grid-content .pic {
  margin-right: 10px;
}

.main-index .grid-content h3 {
  font-size: 20px;
  font-weight: normal;
}

.main-index .grid-content .yesterday {
  color: #ccc;
}

.main-index .grid-content .svg-icon {
  color: #3a8ee6;
}

.matters-wrap {
  padding-bottom: 15px;
  width: 40%;
}

.matters .box {
  width: 100%;
}

.matters-wrap .matters {
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  // height: 120px;
  margin-bottom: 30px;
}

.matters-wrap .matters .title {
  font-size: 16px;
  color: #333333;
  display: inline-block;
  height: 20px;
  line-height: 0;
  padding: 11px;
  text-align: center;
  margin-bottom: 20px;
}

.matters-wrap .matters ul {
  color: #999999;
}

.matters-wrap .matters ul span {
  padding-right: 6px;
  color: #3a8ee6;
}

.score {
  width: 240px;
  // height: 164px;
  box-shadow: inherit;
  border: 1px solid #f1f1f1;
  border-radius: 8px;
  background-color: #fff;

  .score_tit {
    font-size: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    position: relative;
    height: 42px;
    line-height: 42px;
    padding: 0 15px;
    border-bottom: 1px solid #f6f6f6;
    color: #333;
    border-radius: 2px 2px 0 0;
    font-size: 14px;
  }

  .border-b {
    display: flex;
    flex-direction: column;
  }

  .score_list {
    position: relative;
    padding: 15px 15px;
    line-height: 28px;

    .score_item {
      color: #333;
      text-decoration: none;
    }

  }
}

.grid-content .info h3 {
  font-weight: bold;
  color: #5d75e3;
  text-align: center;
}

.grid-content .info .des {
  font-size: 16px;
  margin-bottom: 6px;
}

.grid-content .info .yesterday {
  font-size: 13px;
  text-align: center;
}

.matters_box {
  width: 57%;
  border-top: 1px solid #d9d9d9;
  padding-top: 20px;
}

.matters-wrap .matters_item li .fb {
  font-size: 16px;
  color: #5d75e3;
}

.matters_item li {
  width: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
}

.Echarts {
  box-sizing: border-box;
}

.Echarts > div {
  width: 100%;
  height: 360px;
  box-sizing: border-box;
}
</style>
